<template>
	<view style="margin-left: 32rpx;margin-right: 32rpx;">
		<view style="display: flex;">
			<view v-for="(item,index) in list" :key="index" style="display: flex;">
				<view class="buttonList" :class='item.checked ? "checked_button" : ""' :data-id="item.id"
					@click="radioButtonTap"><text>{{item.name}}</text></view>
			</view>
		</view>
		<scroll-view style="display: flex; flex-wrap: wrap;width: 100%;height: 90vh;" scroll-y="true" class="scroll-Y" @scrolltolower="lower" >
			<view v-for="(item,index) in question" :key="index" @click="toProblemTitle(item.id)"
				style="width: 100%;display: flex; flex-direction: column; ">
				<view style="display: flex;align-items: baseline;justify-content: space-between;">
					<view class="view1">
						<view class="view1Text">
							<text class="text1">Q</text>
						</view>
						<text class="text2" decode>{{item.title}}</text>
					</view>
					<u-icon size="22" color="#9A9A9A" name="arrow-rightward"></u-icon>
				</view>
				<view style="display: flex;align-items: baseline;justify-content: space-between;">
					<view class="view2">
						<view class="view2Text">
							<text class="text3">A</text>
						</view>
						<text class="text4" decode>{{item.content}}</text>
					</view>
				</view>
			</view>
			<view class="nodisplay" style="display: none;"></view>
		</scroll-view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '改色膜',
				list: [{
						id: 0,
						name: '改色膜',
					},
					{
						id: 1,
						name: '彩绘膜',
					},
					{
						id: 2,
						name: '透明膜',
					},
				],
				question: [],
				form: {
					pageNo:1,
					pageSize:8,
					type:1
				},
				isFinish:false,
			}
		},
		created() {
			this.getProblemList();
		},
		async onLoad(options) {
			var that = this
			that.list[0].checked = true;
			this.$forceUpdate();
		},
		methods: {
			async getProblemList(){
				if(this.isFinish) return;
				let res = await this.$api.getProblemList(this.form);
				if(!res?.success){
					this.$refs.uToast.show({type:'error',title: "数据获取失败!"});
				}else{
					let { current, pages, records, size, total } = res.result;
					this.finished = (current * size >= total);
					const reg = /<[^>]+>/gi; //筛选标签
					records = await records.map((item) => {
						item.content = item.content.split(reg)
						.filter(item => (item !== '')&&(item !== '\n')).join('');
						return item;
					})
					if (this.form.pageNo === 1) {
						this.question = records;
					} else {
						this.question = this.question.concat(records)
					}
				}
			},
			lower(e) {
				this.form.pageNo++;
				this.getProblemList();
			},
			radioButtonTap(e) {
				var that = this
				var id = e.currentTarget.dataset.id
				for (let i = 0; i < that.list.length; i++) {
					if (that.list[i].id == id) {
						//当前点击的位置为true即选中
						that.list[i].checked = true;
						that.type = that.list[i].name;
						that.form.type = i+1;
						that.form.pageNo = 1;
						that.form.pageSize = 8;
						that.getProblemList();
					} else {
						//其他的位置为false
						that.list[i].checked = false;
					}
				}
				this.$forceUpdate();
			},
			toProblemTitle(id){
				uni.navigateTo({
					url: '/pages/my/compontents/myProblemTitle?id='+id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f1f1f1;
	}
</style>

<style scoped lang="scss">
	.view1 {
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-top: 32rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		text{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.view2 {
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-top: 16rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		text{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.text1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.view1Text {
		width: 32rpx;
		height: 32rpx;
		background: #0D0D0D;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		text-align: center;
	}

	.text2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		margin-left: 8rpx;
	}


	.view2Text {
		width: 32rpx;
		height: 32rpx;
		text-align: center;
		background: #FBCB11;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.text3 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;

	}

	.text4 {
		width: 100%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		margin-left: 8rpx;
	}

	.buttonList {
		width: 148rpx;
		height: 60rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #969799;
		margin-top: 32rpx;
		background: #FFFFFF;
		border-radius: 896rpx;
		margin-right: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 按钮选中 */
	.checked_button {
		color: #0D0D0D;
		background: #FBCB11;
	}
</style>